<!--
 * @Author: 陈伟 chenwei@duoliheng.com
 * @Date: 2022-11-17 13:54:22
 * @LastEditors: 陈伟 chenwei@duoliheng.com
 * @LastEditTime: 2022-11-17 16:22:24
 * @FilePath: \cool.front\src\views\distributionManage\distributionTrack\components\myOverlay.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <bm-overlay
    ref="customOverlay"
    class="sample"
    pane="markerPane"
    @draw="draw"
  >
    <div class="text" @click.stop="handleClick" v-text="text" />
  </bm-overlay>
</template>

<script>
  export default {
    name: 'MyOverlay',
    props: ['text', 'position', 'color', 'info'],
    watch: {
      position: {
        handler() {
          this.$refs.customOverlay.reload()
        },
        deep: true
      }
    },
    methods: {
      handleClick() {
        this.$emit('overlayClick', this.info)
      },
      draw({ el, BMap, map }) {
        const { lng, lat } = this.position
        const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
        // console.log(pixel)
        // console.log(this.color)
        el.style.left = pixel.x - 10 + 'px'
        el.style.top = pixel.y - 25 + 'px'
        el.style.color = this.color
        el.style.background = this.color
      }
    }
  }
</script>

<style>
.sample {
  /* width: 20px;
  height: 25px;
  background: rgba(0,0,0,0.5); */

  /* overflow: hidden; */

  /* box-shadow: 0 0 5px #000; */

  /* border-radius:10px ; */
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50% 50% 50% 0;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.text {
  line-height: 25px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
</style>
